/*
 * Copyright 2022 Nightingale Team
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react';
import { Form, Row, Col, Select, InputNumber, Mentions } from 'antd';
import _ from 'lodash';
import { useTranslation, Trans } from 'react-i18next';
import { Panel } from '../../Components/Collapse';
import ColorPicker from '../../../Components/ColorPicker';

export default function GraphStyles({ variableConfigWithOptions }) {
  const { t } = useTranslation('dashboard');
  const namePrefix = ['custom'];

  return (
    <Panel header={t('panel.custom.title')} data-oid='wegdmn7'>
      <Row gutter={10} data-oid='_zo_ezv'>
        <Col span={3} data-oid='.f9zfii'>
          <Form.Item label={t('panel.custom.text.textColor')} name={[...namePrefix, 'textColor']} data-oid='-jjcelw'>
            <ColorPicker data-oid='t.arruz' />
          </Form.Item>
        </Col>
        <Col span={4} data-oid='l-cpxd1'>
          <Form.Item label={t('panel.custom.text.textDarkColor')} name={[...namePrefix, 'textDarkColor']} data-oid='5mpwm2j'>
            <ColorPicker data-oid='k-f96jr' />
          </Form.Item>
        </Col>
        <Col span={3} data-oid='8-eramc'>
          <Form.Item label={t('panel.custom.text.bgColor')} name={[...namePrefix, 'bgColor']} data-oid='m93.jrn'>
            <ColorPicker data-oid='_5un9mp' />
          </Form.Item>
        </Col>
        <Col span={4} data-oid='pxyko7x'>
          <Form.Item label={t('panel.custom.text.textSize')} name={[...namePrefix, 'textSize']} data-oid='8fx8tes'>
            <InputNumber data-oid='qubc3ua' />
          </Form.Item>
        </Col>
        <Col span={5} data-oid='0tifsra'>
          <Form.Item label={t('panel.custom.text.justifyContent.name')} name={[...namePrefix, 'justifyContent']} data-oid='azokdz.'>
            <Select data-oid='te57nrg'>
              <Select.Option value='unset' data-oid='a3odj4w'>
                {t('panel.custom.text.justifyContent.unset')}
              </Select.Option>
              <Select.Option value='flexStart' data-oid=':rg9p_j'>
                {t('panel.custom.text.justifyContent.flexStart')}
              </Select.Option>
              <Select.Option value='center' data-oid='_qp842q'>
                {t('panel.custom.text.justifyContent.center')}
              </Select.Option>
              <Select.Option value='flexEnd' data-oid='ib-eyi0'>
                {t('panel.custom.text.justifyContent.flexEnd')}
              </Select.Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={5} data-oid='9juw24o'>
          <Form.Item label={t('panel.custom.text.alignItems.name')} name={[...namePrefix, 'alignItems']} data-oid='djt:bny'>
            <Select data-oid='tl7rufi'>
              <Select.Option value='unset' data-oid='at9gjxo'>
                {t('panel.custom.text.alignItems.unset')}
              </Select.Option>
              <Select.Option value='flexStart' data-oid='_j6elg0'>
                {t('panel.custom.text.alignItems.flexStart')}
              </Select.Option>
              <Select.Option value='center' data-oid='jhvze:8'>
                {t('panel.custom.text.alignItems.center')}
              </Select.Option>
              <Select.Option value='flexEnd' data-oid='rrqq2kr'>
                {t('panel.custom.text.alignItems.flexEnd')}
              </Select.Option>
            </Select>
          </Form.Item>
        </Col>
      </Row>
      <Form.Item
        label={t('panel.custom.text.content')}
        tooltip={
          <Trans ns='dashboard' i18nKey='panel.custom.text.content_tip' data-oid='obfup_z'>
            <div data-oid='nmwdrdb'></div>
            <div data-oid='5hblg:d'></div>
            <div data-oid='o2lhs9n'></div>
          </Trans>
        }
        name={[...namePrefix, 'content']}
        data-oid='r0bctz7'
      >
        <Mentions prefix='$' autoSize={{ minRows: 3 }} placeholder={t('panel.custom.text.content_placeholder')} data-oid='0t_wsyf'>
          {_.map(variableConfigWithOptions, (item) => {
            return (
              <Mentions.Option key={item.name} value={item.name} data-oid='3_6wq0l'>
                {item.name}
              </Mentions.Option>
            );
          })}
        </Mentions>
      </Form.Item>
    </Panel>
  );
}
